<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p5_溢出替换为省略号</title>
  <style>
    div{
      background-color: #5aa4ae;
      /* 必须设置所在区域的大小 且以下代码为组合代码，缺一不可*/
      width: 200px;
      /* 强制文本不换行 */
      white-space: nowrap;
      /* 溢出的文字隐藏 */
      overflow: hidden;
      /* 有文字溢出则替换为省略号 */
      text-overflow:ellipsis ;
    }
  </style>

</head>
<body>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius exercitationem, illum ipsa mollitia non perspiciatis. Debitis dolore, eligendi facilis incidunt minima nemo recusandae rerum sit tempore ut velit voluptate voluptatibus.
</div>
</body>
</html>